<template>
  <div class="comments-container">
    <el-card class="comments-card">
      <template #header>
        <div class="card-header">
          <span>我的评论</span>
        </div>
      </template>

      <div v-loading="loading" class="comments-list">
        <div v-if="commentsList.length === 0" class="empty-data">
          <el-empty description="暂无评论记录"></el-empty>
        </div>

        <div v-else class="comment-items">
          <el-card
            v-for="(item, index) in commentsList"
            :key="index"
            class="comment-item"
            shadow="hover"
          >
            <div class="comment-header">
              <div class="pet-info" @click="viewPetDetail(item.recipeId)">
                <!-- <el-image
                  :src="item.petImage || '/images/no-image.png'"
                  fit="cover"
                  class="pet-image"
                ></el-image> -->
                <span class="pet-name">{{ item.petName }}</span>
              </div>
              <div class="comment-time">
                {{ formatDate(item.createTime) }}
              </div>
            </div>

            <div class="comment-content">
              {{ item.content }}
            </div>

            <div class="comment-footer">
              <el-button
                type="primary"
                size="small"
                plain
                @click="viewPetDetail(item.recipeId)"
                >查看宠物</el-button
              >
              <el-button
                type="danger"
                size="small"
                @click="deleteComment(item.commentId)"
                >删除评论</el-button
              >
            </div>
          </el-card>
        </div>

        <div class="pagination-section" v-if="total > 0">
          <el-pagination
            background
            layout="prev, pager, next, sizes, total"
            :total="total"
            :page-size="queryParams.pageSize"
            :page-sizes="[5, 10, 20]"
            :current-page="queryParams.pageNum"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const loading = ref(false);
const total = ref(0);
const commentsList = ref([]);

// 查询参数
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
});

// 获取评论列表
const getCommentsList = () => {
  loading.value = true;

  // 模拟API调用
  setTimeout(() => {
    const mockData = [];
    for (let i = 0; i < 5; i++) {
      mockData.push({
        commentId: i + 1,
        recipeId: Math.floor(Math.random() * 100),
        petName: "可爱的小猫" + (i + 1),
        petImage: "",
        content:
          "这只宠物看起来非常健康活泼，希望能找到一个好主人！" +
          (i % 2 === 0
            ? "我非常喜欢这样的宠物，如果我家里条件允许，一定会领养的。"
            : ""),
        createTime: new Date(Date.now() - i * 24 * 60 * 60 * 1000),
      });
    }
    commentsList.value = mockData;
    total.value = 15; // 假设总数
    loading.value = false;
  }, 500);
};

// 页码改变处理
const handleCurrentChange = (val) => {
  queryParams.pageNum = val;
  getCommentsList();
};

// 每页条数改变处理
const handleSizeChange = (val) => {
  queryParams.pageSize = val;
  queryParams.pageNum = 1;
  getCommentsList();
};

// 查看宠物详情
const viewPetDetail = (petId) => {
  router.push(`/pet/detail/${petId}`);
};

// 删除评论
const deleteComment = (commentId) => {
  if (confirm("确认删除该条评论吗?")) {
    // 模拟API调用
    setTimeout(() => {
      alert("删除评论成功");
      getCommentsList();
    }, 300);
  }
};

// 格式化日期
const formatDate = (date) => {
  if (!date) return "";
  if (typeof date === "string") {
    date = new Date(date);
  }
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
    2,
    "0"
  )}-${String(date.getDate()).padStart(2, "0")} ${String(
    date.getHours()
  ).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
};

onMounted(() => {
  getCommentsList();
});
</script>

<style scoped>
.comments-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.comments-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.comments-list {
  margin-top: 20px;
}

.empty-data {
  padding: 30px 0;
}

.comment-items {
  margin-bottom: 20px;
}

.comment-item {
  margin-bottom: 15px;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.pet-info {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.pet-image {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  margin-right: 10px;
}

.pet-name {
  font-weight: 500;
  color: #303133;
}

.comment-time {
  font-size: 13px;
  color: #909399;
}

.comment-content {
  color: #606266;
  line-height: 1.6;
  margin-bottom: 15px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.comment-footer {
  display: flex;
  justify-content: flex-end;
}

.comment-footer .el-button {
  margin-left: 10px;
}

.pagination-section {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

@media (max-width: 576px) {
  .comment-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .comment-time {
    margin-top: 5px;
  }
}
</style>
